<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Worker</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 30px 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5em;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .btn-create {
            background: white;
            color: #667eea;
            padding: 12px 30px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .btn-create:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        .projects-container {
            width: 80%;
            margin: 0 auto;
        }

        .project-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            transition: all 0.3s;
            cursor: pointer;
        }

        .project-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        }

        .project-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .project-info {
            flex: 1;
        }

        .project-name {
            font-size: 1.4em;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }

        .project-description {
            color: #666;
            font-size: 0.95em;
            margin-bottom: 8px;
        }

        .project-meta {
            color: #999;
            font-size: 0.85em;
        }

        .project-actions {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9em;
            font-weight: 500;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-success {
            background: #28a745;
            color: white;
        }

        .btn-danger {
            background: white;
            color: #dc3545;
            border: 2px solid #dc3545;
            position: relative;
            overflow: hidden;
        }

        .btn-danger::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: #dc3545;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s;
            z-index: 0;
        }

        .btn-danger:hover {
            color: white;
            border-color: #dc3545;
        }

        .btn-danger:hover::before {
            width: 300px;
            height: 300px;
        }

        .btn-danger span {
            position: relative;
            z-index: 1;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .empty-state {
            background: white;
            border-radius: 15px;
            padding: 60px;
            text-align: center;
            color: #999;
        }

        .empty-state-icon {
            font-size: 4em;
            margin-bottom: 20px;
        }

        .loading {
            text-align: center;
            padding: 60px;
            color: white;
        }

        .spinner {
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 AI Worker</h1>
            <button class="btn-create" onclick="createProject()">
                ➕ 创建项目
            </button>
        </div>

        <div class="projects-container" id="projectsList">
            <div class="loading">
                <div class="spinner"></div>
                <p>加载项目列表...</p>
            </div>
        </div>
    </div>

    <script>
        // 页面加载
        window.onload = function() {
            loadProjects();
        };

        // 加载项目列表
        async function loadProjects() {
            try {
                const response = await fetch('/api/projects');
                if (!response.ok) throw new Error('加载失败');
                
                const data = await response.json();
                const projects = data.projects || [];
                renderProjects(projects);
            } catch (error) {
                document.getElementById('projectsList').innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">❌</div>
                        <p>加载失败: ${error.message}</p>
                    </div>
                `;
            }
        }

        // 渲染项目列表
        function renderProjects(projects) {
            const container = document.getElementById('projectsList');
            
            if (!projects || projects.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">📋</div>
                        <p>暂无项目</p>
                        <p style="margin-top: 10px; font-size: 0.9em;">点击右上角"创建项目"按钮开始</p>
                    </div>
                `;
                return;
            }
            
            // 按创建时间倒序排序
            projects.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
            
            const html = projects.map(project => `
                <div class="project-card" onclick="viewProject(${project.id}, event)">
                    <div class="project-header">
                        <div class="project-info">
                            <div class="project-name">${escapeHtml(project.name)}</div>
                            ${project.description ? `
                                <div class="project-description">${escapeHtml(project.description)}</div>
                            ` : ''}
                            <div class="project-meta">
                                📅 ${new Date(project.created_at).toLocaleString('zh-CN')}
                            </div>
                        </div>
                        <div class="project-actions">
                            <button class="btn btn-success" onclick="goToTestCases(${project.id}, event)">
                                📝 测试用例
                            </button>
                            <button class="btn btn-primary" onclick="goToAnalysis(${project.id}, event)">
                                🔍 代码分析
                            </button>
                            <button class="btn btn-danger" onclick="deleteProject(${project.id}, event)">
                                <span>🗑️ 删除</span>
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
            
            container.innerHTML = html;
        }

        // 创建项目
        function createProject() {
            window.location.href = '/project/create';
        }

        // 查看项目详情
        function viewProject(projectId, event) {
            // 如果点击的是按钮，不跳转
            if (event && (event.target.tagName === 'BUTTON' || event.target.closest('button'))) {
                return;
            }
            window.location.href = `/project/${projectId}`;
        }

        // 跳转到测试用例
        function goToTestCases(projectId, event) {
            event.stopPropagation();
            window.location.href = `/project/${projectId}/testcases`;
        }

        // 跳转到代码分析
        function goToAnalysis(projectId, event) {
            event.stopPropagation();
            window.location.href = `/project/${projectId}/analysis`;
        }

        // 删除项目
        async function deleteProject(projectId, event) {
            event.stopPropagation();
            
            if (!confirm('确定要删除此项目吗？此操作不可恢复。')) {
                return;
            }
            
            try {
                const response = await fetch(`/api/project/${projectId}`, {
                    method: 'DELETE'
                });
                
                if (!response.ok) throw new Error('删除失败');
                
                // 重新加载列表
                loadProjects();
            } catch (error) {
                alert('删除失败: ' + error.message);
            }
        }

        // 辅助函数
        function escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    </script>
</body>
</html>
